<template>
    <div class="render element-vessel" :class="{'element-vessel-after' : isShow}" @click="thisClick">
        <el-form-item :label="(eleData.label || eleData.componentName)+' :'" :prop="eleData.key" :rules="eleData.rules">
            <component :eleData="eleData" :formData="formData" :is="'custom'+eleData.componentType"/>
        </el-form-item>
        <div v-if="isShow" class="iconbox">
            <el-tag
                    class="mx-1"
                    @click="deepCopy"
            >
                <el-icon><copy-document /></el-icon>
            </el-tag>
            <el-tag
                    type="danger"
                    class="mx-1"
                    @click="del"
            >
                <el-icon><delete /></el-icon>
            </el-tag>
        </div>
    </div>
</template>
<script lang="ts">
    import {defineComponent, ref,computed,watch} from 'vue';
    import custominput from './element/input.vue'
    import customselect from "@/components/customForm/element/customselect.vue";
    import customradio from "@/components/customForm/element/customradio.vue";
    import customcheckbox from "@/components/customForm/element/customcheckbox.vue";
    import customupload from "@/components/customForm/element/customupload.vue";
    import {useStore} from "vuex";
    export default defineComponent({
        name: 'render',
        components:{custominput,customselect,customradio,customcheckbox,customupload},
        props:{
            eleData:{
              type:Object
            },
            formData:{
              type:Object
            },
            isPreview:{
                type:Boolean
            }
        },
        setup(props,ctx) {
            const name = ref()
            const isShow = ref(false)
            function thisClick() {
                if(!props.isPreview){
                    isShow.value = true
                }
            }
            const store = useStore()
            const clicknow = computed(()=> store.getters.clickNow)
            watch(clicknow,(newVal:any)=>{
                if(!props.eleData) return
                if (newVal.sign != props.eleData.sign) {
                    isShow.value = false
                }
            })
            const deepCopy = ()=>{
                ctx.emit('copy')
            }
            const del = ()=>{
                ctx.emit('del')
            }
            return {name,isShow,thisClick,deepCopy,del};
        },
    });
</script>
<style lang="scss">
    .element-vessel-after {
        background-color: #b3d8ff !important;
        border-left: 5px solid #409eff !important;
        cursor: pointer;
    }

    .element-vessel {
        padding: 10px;
        position: relative;
        border-left: 5px solid transparent;
        cursor: pointer;
    }
    .iconbox{
        display: flex;
        justify-content: flex-end;
        .mx-1{
            margin: 0 5px;
        }
    }
</style>
